<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link href="mapfiles/css/default.css" rel="stylesheet" type="text/css"/>
    <title>地图显示</title>
    <script type="text/javascript" src="../jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../jquery/jquery-migrate-1.1.1.min.js"></script>
    <!--
        <script type="text/javascript" src="mapapi3.8.6.js"></script>-->
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <!--
        <script type="text/javascript" src="polygon.js"></script> -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
    <script type="text/javascript">

        // 本地地图服务地址
        var strURL = "http://192.168.11.233:8780/maptile/googlemaps/roadmap/"

        function LocalMapType() {
        }
        LocalMapType.prototype.tileSize = new google.maps.Size(256, 256);
        LocalMapType.prototype.maxZoom = 16;   //地图显示最大级别
        LocalMapType.prototype.minZoom = 4;    //地图显示最小级别
        LocalMapType.prototype.name = "本地";
        LocalMapType.prototype.alt = "显示本地地图数据";
        LocalMapType.prototype.getTile = function (coord, zoom, ownerDocument) {
            var img = ownerDocument.createElement("img");
            img.style.width = this.tileSize.width + "px";
            img.style.height = this.tileSize.height + "px";
            img.src = strURL + zoom + "/" + coord.x + "/" + coord.y + ".png";
            return img;
        };
        var localMapType = new LocalMapType();

        var map, infoWindow = new google.maps.InfoWindow();

        // 初始化地图
        function initialize() {

            var myOptions = {
                zoom: 10,//7,
                minZoom: 7,
                maxZoom: 18,
                streetViewControl: false,
                mapTypeControlOptions: {
                    mapTypeIds: [
                        //google.maps.MapTypeId.ROADMAP,
                        //google.maps.MapTypeId.HYBRID,
                        //google.maps.MapTypeId.SATELLITE,
                        //google.maps.MapTypeId.TERRAIN,
                        //'locaMap' //定义地图类型
                    ]
                }
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            map.mapTypes.set('locaMap', localMapType);	//绑定本地地图类型
            //map.setMapTypeId('locaMap');    				//指定显示本地地图

            var city = "文登市";

            new BMap.Boundary().get(city, function (rs) {
                var data = rs.boundaries + "";

                //$.get("data/" + encodeURIComponent(city) + ".dat", function(data){
                if (data != '') {
                    var latLngs = data.split(";"); // 拆分坐标
                    var top = 0, bottom = 0, left = 0, right = 0; // 四周最外坐标
                    var triangleCoords = []; // 经纬度坐标数组
                    for (j = 1; j < latLngs.length - 1; j++) {
                        var postion = latLngs[j].indexOf(",");
                        var lng = parseFloat(latLngs[j].substr(0, postion));//经度
                        var lat = parseFloat(latLngs[j].substr(postion + 1));//纬度
                        triangleCoords.push(new google.maps.LatLng(lat, lng));  //加入经纬度
                        //活动最大，最小经纬度。计算地图中心点
                        if (j == 1 && top == 0 && bottom == 0 && left == 0 && right == 0) {
                            top = lat;
                            bottom = lat;
                            left = lng;
                            right = lng;
                        } else {
                            if (lat > top) {
                                top = lat;
                            }
                            if (lat < bottom) {
                                bottom = lat;
                            }
                            if (lng > right) {
                                right = lng;
                            }
                            if (lng < left) {
                                left = lng;
                            }
                        }
                    }
                    bermudaTriangle = new google.maps.Polygon({
                        paths: triangleCoords,
                        strokeColor: "#FF0000",
                        strokeOpacity: 0.5,
                        strokeWeight: 2,
                        fillColor: "#FF0000",
                        fillOpacity: 0.03
                    });
                    bermudaTriangle.setMap(map);
                    // 单击
                    google.maps.event.addListener(bermudaTriangle, 'click', function (event) {
                        if (infoWindow != null) {
                            infoWindow.close();
                        }
                        //tmpLatLng = tmpLatLng + event.latLng;
                        //showDialog(tmpLatLng);
                    });
                    map.setCenter(new google.maps.LatLng(bottom + ((top - bottom) / 2), left + ((right - left) / 2)));
                    //map.setZoom(8);
                }
            });

            // 单击地图区域关闭消息框
            google.maps.event.addListener(map, 'click', function (event) {
                if (infoWindow != null) {
                    infoWindow.close();
                }
            });

            // 图标类型
            var icons = ["marker1.png", "marker2.png", "marker3.png", "marker4.png"];
            var iconNames = ["类型一", "类型二", "类型三", "类型四"];
            var mapInfos = [];
            for (i = 0; i < icons.length; i++) {
                mapInfos.push("<tr><td><img src='mapfiles/markers/" + icons[i] + "'></td><td>" + iconNames[i] + "</td></tr>");
            }
            $('#map_infos').append(mapInfos.join(''));

            // 维度经度数据
            //var ll = "37.07818882978002, 117.15133666992188;36.98280911070616, 117.257080078125;36.870832155646326, 117.40264892578125;36.711366342819254, 117.51937866210938;36.61662990355667, 117.3779296875;36.569217971443656, 117.16232299804688;36.52950186333475, 116.83135986328125;36.63316209558658, 116.883544921875;36.672824886786564, 117.00164794921875;36.17113976708937, 116.32598876953125;36.33725319397005, 116.553955078125;36.5184659896759, 116.75994873046875;36.40802070382984, 116.993408203125;36.52729481454624, 117.20489501953125;36.639773979496574, 117.11151123046875)";
            var ll = "37.20435500746071, 122.06050872802734;37.175090072219206, 122.05570220947266;37.15183414397669, 122.09449768066406;37.17235445206045, 122.11544036865234;37.18767264916778, 122.13981628417969;37.20599569602764, 122.11441040039062;37.18493748465265, 122.07939147949219";
            var lls = ll.split(";");

            // 添加标注点
            for (i = 0; i < lls.length; i++) {
                if (i == 0) addMarker(map, lls[i], icons[3], "某项目", "2013", "高新区", "80574", "40574", "http://www.baidu.com/img/bdlogo.gif", "http://baike.baidu.com");
                else if (i == 1) addMarker(map, lls[i], icons[1], "某某项目", "2013", "高新区", "80574", "40574", "http://www.baidu.com/img/bdlogo.gif", "http://baike.baidu.com");
                else if (i == 2) addMarker(map, lls[i], icons[2], "某某某项目", "2013", "高新区", "80574", "40574", "http://www.baidu.com/img/bdlogo.gif", "http://baike.baidu.com");
                else addMarker(map, lls[i], icons[i % 2 == 0 ? 3 : 0], "国家重型汽车有关建设项目" + i, "2013", "高新区", "80574", "40574", "http://www.baidu.com/img/bdlogo.gif", "http://baike.baidu.com");
            }

            // 绘制区域线
            if (lls.length > 0) {
                addPolygon(map, lls);
            }

        }

        // 添加标注点
        function addMarker(map, latLngs, icon, name, year, unit, total, curr, image, video) {

            var latLng = latLngs.replace(/ /g, "").split(",");

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(latLng[0], latLng[1]),
                map: map,
                //draggable: true,
                icon: 'mapfiles/markers/' + icon,
                //animation :google.maps.Animation.DROP,
                title: name
            });

            google.maps.event.addListener(marker, 'click', function () {
                //parent.document.menuFrame.location = 'http://www.baidu.com/s?wd='+name;
                var content = "<table><tr><td><b>项目名称: </b></td><td colspan='3' style='color:#f00'>" + name + "</td></tr>"
                        + "<tr><td><b>年份: </b></td><td>" + year + "</td><td><b>责任单位: </b></td><td>" + unit + "</td></tr>"
                        + "<tr><td><b>总投资额(万): </b></td><td>" + total + "</td><td><b>当前投资额(万): </b></td><td>" + curr + "</td></tr>"
                        + "<tr><td colspan='4'><b>当前进度: </b></td></tr><tr>"
                        + "  <td colspan='2'><img src='" + image + "' style='width:300px; height:200px; border:1px solid #ddd;'/></td>"
                        + "  <td colspan='2'><iframe src='" + video + "' style='width:300px; height:200px; border:1px solid #ddd;'><iframe></td>"
                        + "</tr>"
                        + "</table>";
                if (infoWindow != null) {
                    infoWindow.close();
                }
                infoWindow.setContent(content);
                infoWindow.open(map, this);
                /**/
            });

        }

        // 绘制区域线
        function addPolygon(map, latLngs) {
            var paths = [];
            for (i = 0; i < latLngs.length; i++) {
                var latLng = latLngs[i].replace(/ /g, "").split(",");
                paths.push(new google.maps.LatLng(latLng[0], latLng[1]));  //加入经纬度
            }
            var polygon = new google.maps.Polygon({
                paths: paths,
                strokeColor: "#FF0000",
                strokeOpacity: 0.5,
                strokeWeight: 2,
                fillColor: "#FF0000",
                fillOpacity: 0.1
            });
            polygon.setMap(map);
        }
    </script>
</head>
<body onload="initialize()">
<div style="height:100%"><!--
		<div id="side">
			<input id="reset" value="清除区域" type="button" class="navi"/>
			<input id="showData"  value="显示区域坐标" type="button" class="navi"/>
			<div id="dataPanel">&nbsp;</div>
		</div>  -->
    <div id="map_canvas" style="width:100%; height:100%"></div>
    <table id="map_infos"
           style="position:absolute;right:30px;bottom:30px;width:140px;z-index:1000;background:#fff;padding:10px;border:1px solid #adadad;font-size:12px;text-align:center;"></table>
</div>
</body>
</html>
